import React, {useState, useEffect} from 'react'
import { useNavigate } from 'react-router-dom'
import { message } from 'antd'
import validator from '@utils/validator'
import http from '@utils/http'

const SignUp = (props) => {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')

  const navigate = useNavigate();

  useEffect(() => {
  }, [])

  const goToSignIn = (e) => {
    e.preventDefault()
    navigate('/login/signIn')
  }

  const handelRegister = async () => {
    const checkUsername = validator.username(username)
    const checkPassword = validator.password(password)
    const checkConfirmPassword = validator.confirmPassword(confirmPassword, password)

    if (!checkUsername.valid) {
      return message.error(checkUsername.message)
    }
    if (!checkPassword.valid) {
      return message.error(checkPassword.message)
    }
    if (!checkConfirmPassword.valid) {
      return message.error(checkConfirmPassword.message)
    }
    try {
      const res = await http.post('register', {
        username,
        password,
        confirmPassword
      })
      console.log(res)
      if (res.code === 200) {
        localStorage.setItem('zg-jwt', res.data.token)
        message.success('注册成功')
        navigate('/')
      } else {
        message.error(res.message)
      }
    } catch (error) {
      message.error('注册失败')
    }
  }

  const onKeyDown = (e) => {
    if (e.key === 'Enter') {
      handelRegister();
    }
  }

  return (
    <div className="login-main">
      <div className="login-content">
        <div className="content-item">
          <p className="content-item-title">注册账号</p>
          <p className="content-item-subtitle">快速的开始注册你的账号信息</p>
        </div>
        <div className="content-form">
          <div className="content-form-item">
            <i className="form-item-icon user-icon"></i>
            <input className="form-input" value={username} onChange={(e) => setUsername(e.target.value)} type="text" placeholder="请输入账号" />
          </div>
          <div className="content-form-item">
            <i className="form-item-icon password-icon"></i>
            <input className="form-input" value={password} onChange={(e) => setPassword(e.target.value)} type="password" placeholder="请输入密码" />
          </div>
          <div className="content-form-item">
            <i className="form-item-icon confirm-password-icon"></i>
            <input className="form-input" onKeyDown={onKeyDown} value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} type="password" placeholder="请输入确认密码" />
          </div>
          {/* <button className="login-btn" onClick={async () => {
            const params = { action: 'assets', data: 'some data' };
            try {
              const responseCode = await window.electronAPI.get(params);
              console.log('Received response code from main process:', responseCode);
            } catch (error) {
              console.error('Error requesting code from main process:', error);
            }
          }}>获取内容</button> */}
          <button className="login-btn" onClick={() => handelRegister()}>注册</button>
          <p className="form-footer">已经存在登录账号？<a href="#" onClick={goToSignIn}>返回登录</a></p>
        </div>
      </div>
    </div>
  )
}

export default SignUp;